<template>
  <div class="dialog-container">
    <el-dialog
      :title="dialogType==='add'?'添加设备与排口关系':dialogType === 'detail'?'设备与排口关系详情':'修改设备与排口关系'"
      :visible="dialogVisible"
      @open="initData"
      @close="closeDialog"
    >
      <el-form
        ref="form"
        :model="dataForm"
        class="dialog-form"
        :rules="rules"
        label-width="190px"
        size="mini"
        :disabled="dialogType === 'detail'"
      >
        <el-menu>
          <el-menu-item>
            <!-- <el-button type="primary" size="mini" @click="addEquipment">添加设备</el-button> -->
            <el-button type="primary" size="mini" @click="maintenanceContracts">历史合同</el-button>
          </el-menu-item>
          <el-row>
            <el-col :span="10">
              <el-form-item prop="outletId" label="排口名称：">
                <el-select v-model="dataForm.outletId" filterable clearable class="w-100">
                  <el-option
                    v-for="(item, index) in outlets"
                    :key="index + '_outlet'"
                    :value="item.id"
                    :label="item.outletName"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item prop="equipmentTypeId" label="设备类型：">
                <el-select v-model="dataForm.equipmentTypeId" filterable clearable class="w-100">
                  <el-option
                    v-for="(item, index) in equipmentTypes"
                    :key="index + '_equipment'"
                    :value="item.id"
                    :label="item.shortName"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item prop="dataForm.equipmentNumber" label="设备编号：" class="w-100">
                <el-input v-model="dataForm.equipmentNumber" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item prop="contractOe.serviceType" label="合同性质：">
                <el-select v-model="dataForm.contractOe.serviceType" class="w-100">
                  <el-option
                    v-for="(item, index) in serviceTypeList"
                    :key="index + '_serviceType'"
                    :value="item.code"
                    :label="item.codeName"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="运维通知:">
                <el-radio-group v-model="dataForm.contractOe.lastContract" class="search-radio-group">
                  <el-radio :label="1">打开</el-radio>
                  <el-radio :label="0">关闭</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item prop="contractOe.inspectionCycle" label="巡检周期(天)：">
                <el-input v-model="dataForm.contractOe.inspectionCycle" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item prop="contractOe.calibrationCycle" label="标定/校准周期(天)：">
                <el-input v-model="dataForm.contractOe.calibrationCycle" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item prop="contractOe.maintenanceCycle" label="维护周期(天)：">
                <el-input v-model="dataForm.contractOe.maintenanceCycle" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item prop="contractOe.comparisonPeriod" label="实际水样比对周期(天)：">
                <el-input v-model="dataForm.contractOe.comparisonPeriod" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-menu>
      </el-form>
      <span v-if="dialogType !== 'detail'" slot="footer" class="dialog-footer">
        <el-button class="sure-btn" :loading="saveLoading" size="mini" type="primary" @click="handleSave">保存</el-button>
        <el-button class="cancel-btn" size="mini" @click="closeDialog">取消</el-button>
      </span>
    </el-dialog>
    <MaintenanceContractsDialog
      :dialog-visible="contractVisible"
      :dialog-type="contractDialogType"
      :outlet-equipment-id="dataForm.id"
      @selectContract="selectContract"
      @closeContractDialog="closeContractDialog"
    />
  </div>
</template>

<script>
import MaintenanceContractsDialog from './MaintenanceContractsDialog'
import { getDict } from '@/utils/dict'
import { getDatefmt } from '@/utils/common'
import { add, edit } from '@/api/base/outletEquipment'
import { getList as getOutletList } from '@/api/base/outlet'
import { getList as getEquipmentTypeList } from '@/api/info/equipmentType'

export default {
  name: 'AddOutletEquipmentDialog',
  components: {
    MaintenanceContractsDialog
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogType: {
      type: String,
      default: 'detail'
    },
    obj: {
      type: Object,
      default: null
    },
    outletId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      dataForm: {
        id: null,
        outletId: null,
        equipmentTypeId: null,
        equipmentNumber: null,
        equipment: null,
        contractOe: {
          id: null,
          serviceType: '',
          lastContract: 1,
          inspectionCycle: 7,
          calibrationCycle: 30,
          maintenanceCycle: null,
          comparisonPeriod: 30
        }
      },
      outlets: [],
      equipmentTypes: [],
      saveLoading: false,
      serviceTypeList: [],
      contractVisible: false,
      contractDialogType: '',
      rules: {
        outletId: [{ required: true, message: '请选择排口', trigger: 'blur' }],
        equipmentTypeId: [{ required: true, message: '请选择设备类型', trigger: 'blur' }],
        equipmentNumber: [{ required: true, message: '请输入设备编号', trigger: 'blur' }]
        // contractOe: {
        //   serviceType: [{ required: true, message: '请选择合同类型', trigger: 'blur' }]
        // }
      }
    }
  },
  created() {
    this.serviceTypeList = getDict('e029')
    getOutletList().then((data) => {
      this.outlets = data.data.data
    }).catch(() => {})
    getEquipmentTypeList().then((data) => {
      this.equipmentTypes = data.data.data
    }).catch(() => {})
  },
  mounted() {},
  methods: {
    initData() {
      if (this.outletId) {
        this.dataForm.outletId = this.outletId
      }
      if (this.obj) {
        this.dataForm.id = this.obj.id
        this.dataForm.outletId = this.obj.outletId
        this.dataForm.equipmentTypeId = this.obj.equipmentTypeId
        this.dataForm.equipmentNumber = this.obj.equipmentNumber
        this.dataForm.contractOe.id = this.obj.contractOeId
        this.dataForm.contractOe.serviceType = this.obj.serviceType
        this.dataForm.contractOe.inspectionCycle = this.obj.inspectionCycle
        this.dataForm.contractOe.calibrationCycle = this.obj.calibrationCycle
        this.dataForm.contractOe.maintenanceCycle = this.obj.maintenanceCycle
        this.dataForm.contractOe.comparisonPeriod = this.obj.comparisonPeriod
        this.dataForm.contractOe.lastContract = this.obj.lastContract
      }
    },
    handleSave() {
      if (this.dataForm.id) {
        if (this.dataForm.contractOe.lastContract === 1 && this.obj.lastContract !== this.dataForm.contractOe.lastContract) {
          this.dataForm.contractOe.startTime = getDatefmt(new Date(), 'yyyy-MM-dd') + ' 00:00:00'
          this.dataForm.contractOe.endTime = '2099-12-31 23:59:59'
        } else if (this.dataForm.contractOe.lastContract === 0) {
          this.dataForm.contractOe.endTime = getDatefmt(new Date(), 'yyyy-MM-dd') + ' 23:59:59'
        }
      } else {
        if (this.dataForm.contractOe.lastContract === 1) {
          this.dataForm.contractOe.startTime = getDatefmt(new Date(), 'yyyy-MM-dd') + ' 00:00:00'
          this.dataForm.contractOe.endTime = '2099-12-31 23:59:59'
        }
      }

      this.dataForm.serviceType = this.dataForm.contractOe.serviceType
      if (this.dataForm.equipmentTypeId !== null) {
        this.equipmentTypes.forEach(element => {
          if (element.id === this.dataForm.equipmentTypeId) {
            var el = JSON.parse(JSON.stringify(element))
            if (this.obj && this.obj.equipmentId) {
              el.id = this.obj.equipmentId
            }
            el.equipmentNumber = this.dataForm.equipmentNumber
            el.equipmentTypeId = this.dataForm.equipmentTypeId
            el.shortPym = element.shortNamePym
            this.dataForm.equipment = el
          }
        })
      }
      console.log(this.dataForm)
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.saveLoading = true
          if (this.dataForm.id) {
            edit(this.dataForm).then(() => {
              this.$message({
                type: 'success',
                message: '修改成功'
              })
              this.$emit('flushPage')
              this.$emit('closeDialog')
              this.clearData()
              this.saveLoading = false
            }).catch(() => {
              this.saveLoading = false
            })
          } else {
            add(this.dataForm).then(() => {
              this.$message.success('添加成功')
              this.$emit('flushPage')
              this.$emit('closeDialog')
              this.clearData()
              this.saveLoading = false
            }).catch(() => {
              this.saveLoading = false
            })
          }
        }
      })
    },
    closeDialog() {
      this.clearData()
      this.$emit('closeDialog')
    },
    // 添加设备
    // addEquipment() {
    //   this.$emit('closeDialog')
    //   this.$router.push('/system/equipment_')
    // },
    // 维护合同
    maintenanceContracts() {
      this.contractVisible = true
      this.contractDialogType = 'add'
    },
    // 合同信息
    selectContract(data) {
      console.log(data)
      this.contractVisible = false
    },
    closeContractDialog() {
      this.contractVisible = false
    },
    clearData() {
      this.dataForm = {
        id: null,
        outletId: null,
        equipmentTypeId: null,
        equipmentNumber: null,
        equipment: null,
        contractOe: {
          serviceType: '',
          lastContract: 1,
          inspectionCycle: 7,
          calibrationCycle: 30,
          maintenanceCycle: null,
          comparisonPeriod: 30
        },
        startAndEndTime: ''
      }
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
